<template>
	<view class="grid-menu">
		<view v-for="(item, index) in menuList" :index="index" :key="index">
			<view class="grid-item-box">
				<!-- <uni-icons type="image" :size="30" color="#777" /> -->
				<image class="image" :fade-show="true" mode="widthFix" :src=item.icon @error="error" @load="load"></image>
				<text class="grid-item-box-text">{{item.text}}</text>
			</view>
		</view>
					
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList:[{
					text:'订购',
					icon:'/static/images/menu/dg.png'
				},
				{
					text:'用餐申请',
					icon:'/static/images/menu/dc.png'
				},
				{
					text:'会议申请',
					icon:'/static/images/menu/kh.png'
				},
				// {
				// 	text:'意见建议',
				// 	icon:''
				// },
				// {
				// 	text:'就餐申请',
				// 	icon:''
				// },
				// {
				// 	text:'图书借阅',
				// 	icon:''
				// },
				// {
				// 	text:'设备登记',
				// 	icon:''
				// },
				// {
				// 	text:'使用记录',
				// 	icon:''
				// },
				
				],
			};
		}
	}
</script>

<style lang="scss">
	$icon-height:70%;
	uni-page-body,uni-page-refresh{
		height: 100%;
	}
.grid-menu{
	width: 100%;
	height: 100%;
	    display: grid;
	    grid-template-columns: 33.333% 33.333% 33.333%;
	    grid-template-rows: 20% 20% 20% 20%;
		grid-column-gap: 5px;
		grid-row-gap: 5px;
	
		background-color: #F6F6F6;
		// margin-right: 5px;
}
.grid-item-box{
	width: 100%;
	height: 100%;
	display: grid;
	    grid-template-rows: $icon-height calc(100% - #{$icon-height});
	    align-items: center;
	    justify-items: center;
			border-radius: 10px;
	background-color: #fff;
	margin-right: 5px;

}

.grid-item-box-text{
	width: 100%;
	height: 100%;
	display: grid;
	    align-items: flex-start;
	    justify-items: center;
		font-size: 13px;
		// font-weight: bold
}
.image{
	width: 44px;
}
</style>
